<script setup>
import { onMounted, ref } from "vue";
import TopButton from "@/components/Pengyq/TopButton.vue";
import { selectCommodityAPI } from "@/server/api/shopOrder";

import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const route = useRoute();
const baseURL = ref();
const allOrder = ref([]);
const stateIndex = ref(0);

// 所有订单信息数据
const selectCommodityFun = async (shopId) => {
  const res = await selectCommodityAPI(shopId);
  console.log(res);
  allOrder.value = res.data.data;
  baseURL.value = res.config.baseURL;
  allOrder.value.forEach((i) => {
    i.avatarImag = baseURL.value + i.avatarImag;
  });
};
// 定义Nav导航栏数据
const NavList = ref([
  { title: "me.applicationRecords.approved" },
  { title: "me.applicationRecords.reviewFailed" },
]);
const tabList = (index) => {
  if (index !== undefined) {
    stateIndex.value = index;
  }
  let arr = [];
  if (stateIndex.value == 0) {
    arr = allOrder.value.filter((item) => item.status == 0);
  } else {
    arr = allOrder.value.filter((item) => item.status == 1);
  }
  console.log(arr);
  return arr;
};
onMounted(() => {
  selectCommodityFun(route.params.id);
  console.log(route.params.id);
});
</script>
<template>
  <div>
    <top-button :title="route.params.name" />
    <div class="itemCenter">
      <div class="tab_list">
        <ul>
          <li v-for="(i, index) in NavList" :key="index" @click="tabList(index)"
            :class="[stateIndex == index ? 'active' : '']">
            {{ $t(i.title) }}
          </li>
        </ul>
      </div>
      <ul class="list">
        <li class="box_show" v-for="(item, index) in tabList(index)" :key="index">
          <div class="up_box">
            <div class="imgs">
              <img v-lazy="item.avatarImag" alt="" />
            </div>
            <div class="list_ad">
              <div class="title txt-cut">{{ item.commodityName }}</div>
              <div class="text_one">{{ $t("shop.shopDetail.walk") }}</div>
              <div class="price">
                Pi <span>{{ item.price }}</span>
              </div>
            </div>
            <div class="list_hd">
              <div class="login"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.itemCenter {
  padding-top: 60rem;

  height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  width: 100%;
  font-size: 14rem;

  .tab_list {
    ul {
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-around;
      padding: 15rem 10rem;

      li {
        position: relative;
        color: #ccc;
        font-weight: 600;

        &::after {
          position: absolute;
          bottom: -10rem;
          display: none;
          content: "";
          background-color: #642e8e;
          width: 20rem;
          height: 3rem;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 10rem;
        }

        &:hover {
          color: #642e8e;

          &::after {
            display: block;
            color: #642e8e;
          }
        }

        &.active {
          color: #642e8e;

          &::after {
            display: block;
          }
        }
      }
    }
  }

  .list {
    background-color: #f5f5f5;

    li {
      padding: 10rem;
      margin-top: 10rem;
      background-color: #fff;
      display: flex;
      flex-direction: column;

      .up_box {
        display: flex;

        .imgs {
          width: 64rem;
          height: 74rem;
          overflow: hidden;
          border-radius: 10rem;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .list_hd {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          height: 20rem;
          padding: 10rem 0;

          .text_right {
            color: #642e8e;
            font-size: 16rem;
            margin-left: 56rem;
          }
        }

        .list_ad {
          width: 50%;
          margin: 5rem 10rem 0;
          display: flex;
          flex-direction: column;

          .title {
            width: 200rem;
            font-size: 14rem;
            line-height: 26rem;
          }

          .text_one {
            color: rgba(153, 153, 153, 1);
            font-size: 13rem;
            margin-top: 5rem;
          }

          .price {
            margin-top: 5rem;
            font-size: 14rem;
            color: rgb(0, 0, 0);

            span {
              color: rgba(100, 46, 142, 1);
              font-size: 14rem;
            }
          }
        }
      }

      .bottom_button {
        margin-left: 236rem;
        font-size: 12rem;
        width: 120rem;
        height: 30rem;
        line-height: 30rem;
        text-align: center;
        border-radius: 20rem;
        background-color: #642e8e;
        color: #fff;
      }
    }
  }
}
</style>
